<template>
    <div class="categories">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
                    </el-breadcrumb>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
              <el-button type="success" plain>添加分类</el-button>
          </el-col>
        </el-row>

            <tree-grid
                :treeStructure="true"
                :columns="columns"
                :controls='false'
                :data-source="dataSource"
                @deleteCate="deleteCategory"
                @editCate="editCategory"
                >
        </tree-grid>

        <div class="page">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
        </div>

    </div>
</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import {getcategoriesAll} from '@/api'
export default {
    data () {
        return {
            pagesize:1,
            pagenum:5,
            total:0,
            dataSource: [],
            columns: [{
            text: '分类名称',
            dataIndex: 'cat_name',
            width: ''
            }, {
            text: '是否有效',
            dataIndex: 'cat_deleted',
            width: ''
            }, {
            text: '排序',
            dataIndex: 'cat_level',
            width: ''
            }]
        }
        },
        created() {
            this.initList()
        },
        methods: {
            deleteCategory (cid) {
                console.log(cid)
            },
            editCategory (cid) {
                console.log(cid)
            },
                  handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize=val
               
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pagenum=val
      },
            // 商品列表初始化
            initList(){
                getcategoriesAll({type:'3',pagenum:1,pagesize:5}).then(res=>{
                    console.log(res)
                    if(res.meta.status==200){
                         this.total=res.total
                        this.dataSource=res.data.result
                    }
                })
            }
            },
    components:{
        TreeGrid
    }
}
</script>
<style lang="scss" scoped>

</style>
